<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				/*外边距属性：推  效果居中*/
				margin-top: 10px;
				margin-left: 10px;
				margin: 300px auto;
				/*auto是自动计算页边距 只能实现右左
				margin如果两个值是分上下和右左*/
				transform: rotate(-45deg);
				/*美化操作：滤镜属性--光晕（下阴影）  三个值 分别为阴影偏移的X轴的值 第二个为Y轴 第三个为范围 后面加颜色*/
				filter: drop-shadow(0 0 30px #e4393c);
				/*启动动画 复合属性 animation+关键帧的名称+过渡时间+流畅度+播放次数*/
				animation: heart .8s linear infinite;
			}
			div:after{
				/*伪类选择器可以追加效果 after和before
				after 追加一个效果 在元素之后生成一个文本内容
				前面是任意选择器 加content：”内容“*/
				content:"";
				/*生成的文本时=是行内元素（不可设置宽高，在一行内显示）
				还有块元素（可设宽高 独占一行）
				转换用display属性：block*/
				display: block;
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				border-radius: 50%;
				position: relative;
				left: 0px;
				top: -450px;
			}
			div:before{
				content:"";
				display: block;
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				border-radius: 50%;
				position: relative;
				left: 150px;
				top: 0px;
			}
			/*关键帧属性 类似于手翻书功能*/
			@keyframes heart{
				0%{
					/*缩放(用scale，>1为放大，<1为缩小)*/
					transform:rotate(0deg) scale(1);
				}
				30%{
					transform:rotate(180deg) scale(.7);
				}
				100%{
					transform:rotate(444deg) scale(1.2);
				}
			}
			
		</style>
	</head>
	<body>
		<audio src="img/heart .mp3" controls></audio>
		<div>
		</div>
	</body>
</html>